import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  Dimensions
} from 'react-native';
import PropTypes from 'prop-types'

import {PullView} from 'react-native-pull';

export default class extends Component {
  static propTypes = {
    onPullRelease: PropTypes.func
  }

  constructor(props) {
    super(props);
    this.state = {refreshing: false};
    this.onPullRelease = this.onPullRelease.bind(this);
    this.topIndicatorRender = this.topIndicatorRender.bind(this);
  }

  onPullRelease(resolve) {
    //do something
    this.props.onPullRelease && this.props.onPullRelease()
    setTimeout(() => {
      resolve();
    }, 0.5);
  }

  topIndicatorRender(pulling, pullok, pullrelease) {
    const hide = {position: 'absolute', left: 10000};
    const show = {position: 'relative', left: 0};
    setTimeout(() => {
      if (pulling) {
        this.txtPulling && this.txtPulling.setNativeProps({style: show});
        this.txtPullok && this.txtPullok.setNativeProps({style: hide});
        this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
      } else if (pullok) {
        this.txtPulling && this.txtPulling.setNativeProps({style: hide});
        this.txtPullok && this.txtPullok.setNativeProps({style: show});
        this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
      } else if (pullrelease) {
        this.txtPulling && this.txtPulling.setNativeProps({style: hide});
        this.txtPullok && this.txtPullok.setNativeProps({style: hide});
        this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show});
      }
    }, 1);
    return (
      <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>
        <ActivityIndicator size="small" color="gray" />
        {/*<Text ref={(c) => {this.txtPulling = c;}}>下拉刷新pulling...</Text>*/}
        {/*<Text ref={(c) => {this.txtPullok = c;}}>松开刷新pullok......</Text>*/}
        <Text ref={(c) => {this.txtPullrelease = c;}}>玩命刷新中......</Text>
      </View>
    );
  }

  render() {
    return (
      <PullView style={{width: Dimensions.get('window').width}} onPullRelease={this.onPullRelease} topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={60}>
        {
          this.props.children
        }
      </PullView>
    );
  }

}

const styles = StyleSheet.create({
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
